import { ReactComponent as BannedJuiceIcon } from '@/shared/icons/emoji/ban-juice-icon.svg';
import { ReactComponent as BannedNutIcon } from '@/shared/icons/emoji/ban-nut-icon.svg';

import cs from './List.module.scss';
import { ListItem } from './ListItem';

const bannedProductsList = [
  { id: 1, title: 'До 1 года', items: ['Фруктовые соки', 'Животное молоко', 'Пряности'], icon: <BannedJuiceIcon /> },
  { id: 2, title: 'До 1,5 лет', items: ['Бульоны на мясе, птице, рыбе', 'Сыры полутвердые'] },
  {
    id: 3,
    title: 'До 2 лет',
    items: [
      'Сахар и продукты с добавленными сахарами',
      'Соль',
      'Круглые твердые продукты (попкорн, цельные ягоды, леденцы, цельные орехи)',
      'Непастеризованное молоко',
      'Непастеризованные йогурты',
      'Морепродукты',
      'Черный чай',
      'Какао',
    ],
    icon: <BannedNutIcon />,
  },
  {
    id: 4,
    title: 'До 3–4 лет',
    items: ['Домашние консервации', 'Копчености', 'Грибы промышленного производства (вешенки, шампиньоны)'],
  },
  { id: 5, title: 'До 5 лет', items: ['Сыры с плесенью', 'Квас'] },
  { id: 6, title: 'До 7 лет', items: ['Дикорастущие грибы'] },
  { id: 7, title: 'До 10 лет', items: ['Зеленый чай', 'Кофе (одна чашка в день до 14 лет)'] },
  {
    id: 8,
    title: <>Старше 10&nbsp;лет</>,
    items: [
      'Сырые яйца',
      'Домашний майонез',
      `Некоторые сорта рыб (тунец, марлин, акула, рыба-черепаха,
      малакант, ерш, пангасиус, рыба-меч, королевская макрель`,
    ],
  },
];

export const BannedProductsList = () => (
  <div className={cs.list_container}>
    <h3 className={cs.title}>Запрещенные продукты</h3>
    <div className={cs.list_items}>
      {bannedProductsList.map(({ id, title, items, icon }, index) => (
        <ListItem border={index !== bannedProductsList.length - 1} icon={icon} key={id} list={items} title={title} />
      ))}
    </div>
  </div>
);
